<template>
  <van-sticky>
    <Header title="听课管理"/>
    <van-cell>
      <van-row>
        <van-col span="8"><van-button class="status_button" style="background-color: #43CF7C"></van-button><span>已创建</span></van-col>
        <van-col span="8"><van-button class="status_button" style="background-color: #FF8D1A"></van-button><span>已保存</span></van-col>
        <van-col span="8"><van-button class="status_button" style="background-color: #2b95ef"></van-button><span>已提交</span></van-col>
      </van-row>
    </van-cell>
  </van-sticky>

  <van-cell-group v-for="(item, index) in tkDtail.rows" :key="index" class="content">
    <van-cell>
      <div class="cell_title">
        <van-button v-if="item.status === 2" class="cell_button" style="background-color: #2b95ef"></van-button>
        <van-button v-if="item.status === 1" class="cell_button" style="background-color: #FF8D1A"></van-button>
        <van-button v-if="item.status === 0" class="cell_button" style="background-color: #43CF7C"></van-button>
        <span >{{item.courseName}}</span>
      </div>

      <van-row class="cell_content">
        <van-col span="16">
          <div class="cell_left">
            <div>{{item.collegeId}}</div>
            <div>{{item.teaName}}</div>
            <div>
              <span style="margin-right: 3vw;">{{item.createTime}}</span>
              <span>{{item.section}}</span>
            </div>
          </div>
        </van-col>
        <van-col span="8">
          <span class="cell_totalScores">{{item.totalScores}}</span>
        </van-col>
      </van-row>
      <div class="cell_right">
        <div v-if="item.status === 2" style="margin-left: 62vw;">
          <van-button  class="option_button" style="background-color: #2b95ef" @click="reRecoder(index, item.status)">查看</van-button>
        </div>
        <div v-else-if="item.status === 1" style="margin-left: 62vw;">
          <van-button  class="option_button" style="background-color: #FF8D1A" @click="reRecoder(index, item.status)">修改</van-button>
<!--          <van-button  class="option_button" style="background-color: #FF8D1A" @click="deleteRecoder(index)">删除</van-button>-->
        </div>
        <div v-else-if="item.status === 0" style="margin-left: 40vw;">
          <van-button  class="option_button" style="background-color: #43CF7C" @click="reRecoder(index, item.status)">修改</van-button>
          <van-button  class="option_button" style="background-color: #43CF7C" @click="deleteRecoder(index)">删除</van-button>
        </div>
      </div>
    </van-cell>
  </van-cell-group>
</template>

<script setup>
import {getTkRecordListUrl} from "/@/api/new_module/listen_class/tkTable";
import {Dialog, Toast} from "vant";
import {useRouter} from "vue-router/dist/vue-router";
import {deleteTkRecordUrl} from "../../api/new_module/listen_class/tkTable";

const tkDtail = ref([])
const router = useRouter();

const initData = async () => {
  const data = await getTkRecordListUrl({
    pageNum:1,
    pageSize:100,
    year:2023,
    term:0,
  })
  tkDtail.value = data.response.value
  tkDtail.value.rows.forEach((item,index)=>{
    tkDtail.value.rows[index].createTime = data.response.value.rows[index].createTime.substring(0, 10);
  })
}

const reRecoder = (index,stauts) => {
  router.push({ name: '问卷记录', query: { tkId: tkDtail.value.rows[index].tkId, stauts: stauts}})
}

const deleteRecoder = (index) => {
  Dialog.confirm({
    title: '删除',
    message: '确定要删除吗？',
  }).then(async () => {
    await deleteTkRecordUrl(tkDtail.value.rows[index].tkId).then(() =>{
      initData()
      Toast(res.data.msg)
    }).catch(() => {})
  }).catch(() => {})
}

onMounted(() =>{
  initData()
})
</script>

<style scoped lang="less">

.status_button{
  width: 10vw;
  height: 3vw;
  border-radius: 20vw;
  margin-right: 2vw;
  margin-left: 3vw;
}

.content{
  width: 95vw;
  margin: 0 2.5vw 2.5vw 2.5vw;
  border-radius: 20px;
}

.cell_title{
  font-size: 5.5vw;
  color: rgb(122, 122, 131);
  display: flex;
}

/deep/.cell_button{
  width: 2vw;
  height: 7vw;
  padding: 0;
  margin:0 2vw 0 0;
  border-radius: 20vw;
  .van-button__content{
    display: inline-grid;
  }
}

.cell_content{
  display: flex; /* 使用 Flex 布局 */
  flex-direction: row; /* 水平排列 */
  color: #9b9b9f;
  border-radius: 20vw;
}
.cell_left{
  display: flex; /* 使用 Flex 布局 */
  flex-direction: column;
  font-size: 4vw;
}
.cell_totalScores{
  display: flex;
  font-size: 13vw;
  color: #2b95ef;
  font-style: italic;
  text-align: center;
  align-content: center;
  margin-top: 5vw;
}

.option_button{
  border-radius: 20px;
  height: 7vw;
  margin-left: 2vw;
  color: white;
  width: 20vw;
}
</style>
